<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="keywords" content="HTML格式化, js格式化, JS加密, css格式化, css压缩">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线JS/HTML格式化,JS代码加密压缩</title>
<meta name="baidu_union_verify" content="c7b1ed99149de450b9aa90606afb8b1c">
<link rel="icon" type="text/css" href="img/js-html.png">
<meta name="description" content="提供JS/HTML在线美化在线格式化的一款工具,可以转换成容易阅读的代码格式，站长必备！">
<meta name="keywords" content="js代码压缩,javascript代码美化,html格式化,html美化,html压缩,html代码格式化,html应用原格式,在线站长工具">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container">
<div>

<h3>
<a href="index.html">HTML/JS在线格式化</a>&nbsp;&nbsp;<a href="css.html">在线CSS格式化和压缩</a>
</h3>
<hr>
<div class="row">
<textarea class="form-control" rows="7" id="content" placeholder="请在这里输入您需要格式化的HTML或者JS代码"></textarea>
</div>
<div class="row" style="margin-top:20px">
<div class="col-md-2">
<div class="form-group">
<select class="form-control" id="tabsize">
<option value="1">
制表符缩进
</option>
<option value="2">
2个空格缩进
</option>
<option value="4" selected="selected">
4个空格缩进
</option>
<option value="8">
8个空格缩进
</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-danger" id="beautify">
格式化
</button>
<button type="submit" class="btn btn-primary" id="btn2">
代码压缩
</button>
<button type="submit" class="btn btn-primary" id="btn3">
加密压缩
</button>

<button type="submit" class="btn btn-primary" id="btn5">
清空结果
</button>
</div>
<div class="row" style="margin-top:20px">
<textarea class="form-control" rows="7" id="shuchu" placeholder="成功格式化代码区域"></textarea>
</div>
<hr>
<div class="item-box">
<h3>在线工具介绍</h3>
<hr>
<div class="view-box">
<p>输入HTML代码，可以进行代码自动格式化，自动缩进换行，修正无效HTML代码，它可以美化杂乱的HTML代码,同时纠正HTML代码错误，也可以进行HTML在线压缩！ ！</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/base.js">
    </script>
<script type="text/javascript" src="js/js.js">
    </script>
<script type="text/javascript" src="js/html.js">
    </script>
    </script>
<script type="text/javascript">
      $("#beautify").bind("click",
      function() {
        js_source = document.getElementById('content').value.replace(/^\s+/, '');
        tabsize = document.getElementById('tabsize').value;
        tabchar = ' ';
        if (tabsize == 1) {
          tabchar = '\t'
        }
        if (js_source && js_source.charAt(0) === '<') {
          document.getElementById('shuchu').value = style_html(js_source, tabsize, tabchar, 80)
        } else {
          document.getElementById('shuchu').value = js_beautify(js_source, tabsize, tabchar)
        }
        return false
      });
      $("#btn2").bind("click",
      function() {
        var input = document.getElementById('content').value;
        var packer = new Packer;
        var output = packer.pack(input, 0, 0);
        document.getElementById('shuchu').value = output;
        return false
      });
      $("#btn3").bind("click",
      function() {
        var input = document.getElementById('content').value;
        var packer = new Packer;
        var output = packer.pack(input, 1, 0);
        document.getElementById('shuchu').value = output;
        return false
      });
      $("#btn5").bind("click",
      function() {
        document.getElementById('content').value = '';
        document.getElementById('shuchu').value = '';
        document.getElementById('content').select();
        return false
      });
    </script>
<div style="display: none;">

</div>

</body>
</html>